<template>
  <div>
    <el-button @click="deleteMany()">批量删除</el-button>
  <el-table :data="newsList" border stripe  @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="新闻编号" prop="id"></el-table-column>
    <el-table-column label="新闻标题" prop="title"></el-table-column>
    <el-table-column label="新闻内容">
      <template slot-scope="abc">
        <el-input type="text"/>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="abc">
        <el-button size="mini" @click="updateNews(abc.row)">编辑</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  export default {
    name: "table1",
    data(){
      return {
        newsList:[
          {id:1,title:"测试新闻标题",content:"新闻内容"},
          {id:2,title:"测试新闻标题2",content:"新闻内容2"},
          {id:3,title:"测试新闻标题3",content:"新闻内容3"},
          {id:4,title:"测试新闻标题4",content:"新闻内容4"}
        ],
        selectedNews:[]
      }
    },
    methods:{
      deleteMany(){
        this.selectedNews.forEach((news,index)=>{
          console.log(news.id)
        })
      },
      handleSelectionChange(val){
        this.selectedNews=val;
      },
      updateNews(news){
        console.log(news);
      }
    }
  }
</script>
